21. ref props mixin plugin scoped

21.1 ref

ref被用来给元素或子组件注册引用信息(id的替代者)

• 应用在html标签上获取的是真实DOA元素，应用在组件标签上获取的是组件实例对象vc
• 使用方式
  • 打标识：<h1 ref="xxx"></h1>或<School ref="xxx"></School>
  • 获取：this.$refs.xxx

App.vue

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">展示上方的DOM元素</button>
    <School ref="sch"></School>
    <School></School>
    <School></School>
  </div>
</template>

<script>
import School from './components/School.vue'

export default {
  name: 'App',
  data() {
    return {
      msg: '欢迎学习Vue！'
    }
  },
  components: {
    School
  },
  methods: {
    showDom() {
      console.log(this.$refs.title)   // 真实DOM元素
      console.log(this.$refs.btn)     // 真实DOM元素
      console.log(this.$refs.sch)     // School 组件的实例对象（vc）
    }
  }
}
</script>

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'ETC',
				address:'武汉'
			}
		},
	}
</script>

<style>
	.school{
		background-color: gray;
	}
</style>

22.2 props

props 让组件接收外部传过来的数据

• 传递数据 <Student name='xxx' :age='18'> 这里的age 前面加上 :，通过 v-bind 是得里面的18是数字
• 接收数据
  1. 第一种方式（只接收）props:['name','age]
  2. 第二种方式（限制类型） props:{name: String, age: Number}
  3. 第三种方式（限制类型、限制必要性、指定默认值）

props: {
    name: {
        type: String,	 // 类型
        required: true,// 必要性
        default: 'cess'// 默认值
    }
}

备注：props是只读的，vue底层会监测你对 props 的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制 props的内容到data 中，然后修改data 里面的数据

Student.vue

<template>
  <div class="school">
    <h1>{{msg}}</h1>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ MyAge+1 }}</h2>
    <button @click="MyAge++">年龄 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'VueTestSchool',

  data() {
    return {
      msg: '我是一名学生',
      MyAge: this.age
    }
  },
  // props:['name','age','sex']  // 简单接收

  // 接收的同时对数据进行类型限制
  // props: {
  //   name: String,
  //   age: Number,
  //   sex: String
  // },

  // 接收的同时对数据：进行类型限制 + 默认值的指定 + 必要性的限制
  props: {
    name: {
      type: String, // name 的类型是字符串
      required: true //  name 是必要的
    },
    age: {
      type: Number,
      default: 99
    },
    sex: {
      type: String,
      required: true
    }
  },

  mounted() {},

  methods: {}
}
</script>

App.vue

<template>
  <div>
    <Student name='李四' sex="女" :age="18"></Student>
  </div>
</template>

<script>
import Student from './components/Student.vue'

export default {
  name: 'App',
  data() {
    return {
      msg: '欢迎学习Vue！'
    }
  },
  components: {
    Student
  },
  methods: {}
}
</script>

22.3 mixin(混入)

功能：可以把多个组件公用的配置提取成有个混入对象

使用方式：

1. 第一步定义混合，例如：

   {
   data() {...}
   methods: {...}
   ...
   }
   

2. 第二步使用混入，例如：

   • 全局混入：Vue.mixin(xxx)
   • 局部混入：mixins:['xxx']

备注

1. 组件和混入对象含有同名选项时，这些选项将以恰当的方式进行" 合并 "，在发生冲突时以组件优先

mixin.js

var mixin = {
	data: function () {
		return {
    		message: 'hello',
            foo: 'abc'
    	}
  	}
}

new Vue({
  	mixins: [mixin],
  	data () {
    	return {
      		message: 'goodbye',
            	bar: 'def'
    	}
    },
  	created () {
    	console.log(this.$data)
    	// => { message: "goodbye", foo: "abc", bar: "def" }
  	}
})

2. 同名的生命周期钩子将合并为有个数组，因此都将被调用，另外，混入对象的钩子将在组件自身钩子之前调用

var mixin = {
  	created () {
    	console.log('混入对象的钩子被调用')
  	}
}

new Vue({
  	mixins: [mixin],
  	created () {
    	console.log('组件钩子被调用')
  	}
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}

export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

School.vue

<template>
  <div>
    <h2 @click="showName">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
  //引入一个hunhe (局部引用)
  import {hunhe,hunhe2} from '../mixin'

  export default {
    name:'School',
    data() {
      return {
        name:'菠萝学院',
        address:'武汉',
        x:666
      }
    },
    mixins:[hunhe,hunhe2]	// 局部混入
  }
</script>

Student.vue

<template>
  <div>
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  import {hunhe,hunhe2} from '../mixin'

  export default {
    name:'Student',
    data() {
      return {
        name:'张三',
        sex:'男'
      }
    },
    mixins:[hunhe,hunhe2]	// 局部混入
  }
</script>

App.vue

<template>
  <div>
    <School/>
    <Student/>
  </div>
</template>

<script>
  import School from './components/School'
  import Student from './components/Student'

  export default {
    name:'App',
    components:{School,Student}
  }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
// import {mixin} from './mixin'

Vue.config.productionTip = false
// Vue.mixin(hunhe)		// 全局混合引入
// Vue.mixin(hunhe2)	// 全局混合

new Vue({
    el:"#app",
    render: h => h(App)
})

22.4 plugin 插件

1. 功能：用于增强Vue
2. 本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据
3. 定义插件
4. 使用插件 Vue.use()

plugin.js

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

main.js

// 引入Vue
import Vue from 'vue'
import App from './App.vue'

// 关闭Vue的生产提示
Vue.config.productionTip = false

// 引入插件
import plugins from './plugins'

// 应用（使用）插件
Vue.use(plugins, 1, 2, 3)

// 创建vm
new Vue({
  render: h => h(App),
}).$mount('#app')

School.vue

<template>
  <div class="school">
    <h2>学校名称：{{ name | mySlice }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="test">点我测试一下hello方法</button>
  </div>
</template>

<script>
export default {
  name: 'VueTestSchool',

  data() {
    return {
      name: '菠萝学院 boluo',
      address: '武汉'
    }
  },
  methods: {
    test() {
      this.hello()
    }
  },
  mounted() {}
}
</script>

Student.vue

<template>
  <div class="school">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <input type="text" v-fbind:value='name'>
  </div>
</template>

<script>
export default {
  name: 'VueTestSchool',

  data() {
    return {
      name: '张三',
      sex: '男'
    }
  }
}
</script>

22.5 scoped

1. 作用：让样式在局部生效，防止冲突
2. 写法：<style scoped>

Vue 中的 webpack 并没有安装最新版的，导致有些插件也不能默认安装最新版的 如 npm i less-loder@7 ，而不是最新版

School.vue

<template>
	<div class="demo">
		<h2 class="title">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷atguigu',
				address:'北京',
			}
		}
	}
</script>

<style scoped>
	.demo{
		background-color: skyblue;
	}
</style>

Student.vue

<template>
	<div class="demo">
		<h2 class="title">学生姓名：{{name}}</h2>
		<h2 class="atguigu">学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		}
	}
</script>

<style lang="less" scoped>
	.demo{
		background-color: pink;
		.atguigu{
			font-size: 40px;
		}
	}
</style>

App.vue

<template>
	<div>
		<h1 class="title">你好啊</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

<style scoped>
	.title{
		color: red;
	}
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})